<template>
    <div class="title">
        <div class="title-title">热点新闻</div>
        <div class="news-hr"></div>
        <div class="list" @click="handleClickNews">
            <div class="list-title">僵尸企业为何僵而不死？如何破局？国有企业混改</div>
            <div class="list-info">2019年9月18日 - 广东出台首个僵尸企业司法处置工作指引 2019年06月10日 19:32 广东出台首个僵尸企业司法处置工作指引 2019年06月10日 19:32 11部门要求分类处置“僵尸</div>
        </div>
        <div class="news-hr"></div>
        <div class="list">
            <div class="list-title">僵尸企业为何僵而不死？如何破局？国有企业混改</div>
            <div class="list-info">2019年9月18日 - 广东出台首个僵尸企业司法处置工作指引 2019年06月10日 19:32 广东出台首个僵尸企业司法处置工作指引 2019年06月10日 19:32 11部门要求分类处置“僵尸</div>
        </div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>若有任何问题请联系我们</span>
            </div>
            <div v-for="item of contact" :key="item.id" class="text item">
                {{item.content}}
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      contact: [{
        id: '001',
        content: '电话'
      }, {
        id: '002',
        content: '地址'
      }, {
        id: '003',
        content: 'QQ'
      }, {
        id: '004',
        content: '公众号'
      }, {
        id: '005',
        content: '工作时间'
      }, {
        id: '006',
        content: '传真'
      }]
    }
  },
  methods: {
    handleClickNews () {
      this.$router.push('/news')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibies.styl';
    .title{
      width: 100%;
        font-size: 22px;
        font-weight: bold;
        color: $bgColor;
        position relative;
    }
    .title-title{
      position relative;
      left: 10%;
      width: 70%;
    }
    .news{
      left: 10%;
    }
    .news-hr{
        border: grey 1px solid;
        width: 60%;
        position relative;
        left: 10%;
    }
    .list{
        height: 150px;
        position relative;
        left: 10%;
        width 70%;
    }
    .list-title{
        font-size: 28px;
        color: black;
    }
    .list-info{
        width: 80%;
        word-break:break-all;
        font-size: 15px;
        text-indent: 20px;
        margin-top: 1%;
        color: grey;
    }
     .text {
    font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }。

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        height: 330px;
        width: 20%;
        position: absolute;
        top: -4%;
        left: 72%;
        background: #F5F5F5;
    }
</style>
